<template>
  <div class="share-sheet">
    <div class="title">{{title}}</div>
    <div class="list">
      <div class="item" v-for="item in list" :key="item.title">
        <div class="icon" :style="{background: item.color}" @click="handleClick(item)">
          <i class="iconfont">{{item.icon}}</i>
        </div>
        <span class="title">{{item.title}}</span>
      </div>
    </div>
    <div class="cancel" @click="close">
      取消
    </div>
  </div>
</template>

<script>
export default {
  name: "ShareSheet",
  props: {
    title: {
      type: String,
      default: '分享'
    }
  },
  data() {
    return {
      list: [
        {
          title: '微信',
          icon: '\ue63b',
          color: '#3BBB07',
          key: 'Wechat',
        },{
          title: '朋友圈',
          icon: '\ue630',
          color: '#9FCE18',
          key: 'WechatMoments',
        },{
          title: 'QQ',
          icon: '\ue631',
          color: '#3BAFFC',
          key: 'QQ',
        },{
          title: 'QQ空间',
          icon: '\ue615',
          color: '#FCCC54',
          key: 'QQSpace',
        },{
          title: '微博',
          icon: '\ue630',
          color: '#F75669',
          key: 'MicroBlog',
        },
      ]
    }
  },
  methods: {
    handleClick(item) {
      console.log(item.key)
    },
    close() {
      this.$emit('close')
    }
  },
};
</script>

<style lang="scss" scoped>
  .share-sheet {
    .title {
      padding-top: 20px;
      text-align: center;
      line-height: 1;
      color: #333;
      font-size: 15px;
    }

    .list {
      display: flex;
      padding: 20px 20px;
      overflow-y: scroll;

      .item {
        text-align: center;
        margin-right: 30px;

        &:last-of-type {
          margin-right: 0;
        }

        .icon {
          width: 46px;
          height: 46px;
          line-height: 46px;
          border-radius: 50%;          

          .iconfont {
            color: #fff;
            font-size: 25px;
          }
        }

        .title {
          color: #646566;
          font-size: 12px;
          display: inline-block;
          margin-top: 8px;
        }
      }
    }

    .cancel {
      width: 100%;
      height: 45px;
      line-height: 45px;
      text-align: center;
      color: #666;
      font-size: 14px;
      background: #fff;
      border-top: 8px solid #f7f8fa;
    }
  }
</style>
